<template>
  <div>
    <pageTop :text="text"></pageTop>
    <div @click="blank">
      <slideBar></slideBar>
      <div>
        <van-tabs v-model="active">
          <van-tab v-for="(v,index) in categoryList" :title="v.name" :key="index">
            <div v-if="v.info">
              <van-tabs :value.sync="act" indicator-color="#000" class="tabbar">
                <van-tab v-for="(w,key) in v.info" :key="key" @click="getId(key)" :title="w.name">
                  <div style="width: 95vw;margin: 0px auto;">
                    <goodsList :id="w.id"></goodsList>
                  </div>
                </van-tab>
              </van-tabs>

            </div>
              <div v-else>
                <div style="width: 95vw;margin: 0px auto;">
                  <goodsList :id="v.id"></goodsList>
                </div>
              </div>

            <!--<div  style="margin-top: -2vw">
            <div v-if="v.info">
                <mu-tabs :value.sync="act" indicator-color="#000" class="tabbar">
                  <mu-tab v-for="(w,key) in v.info" :key="key" @click="getId(key)">
                    <div class="text" style="border: 1px solid;width: 14vw;height: 6vw;border-radius: 3vw;line-height:6vw">{{w.name}}</div>
                  </mu-tab>
                </mu-tabs>
              <div style="width: 95vw;margin: 0px auto;margin-top: 4vw">
                <goodsList :id="id"></goodsList>
              </div>
            </div>
              <div v-else>
                <div>
                  <div style="width: 95vw;margin: 0px auto;margin-top: 4vw">

                  </div>
                </div>
              </div>

            </div>-->

          </van-tab>
        </van-tabs>
      </div>

      <gotop></gotop>
    </div>

  </div>
</template>

<script>
  import pageTop from '../components/pageTop'
  import slideBar from '../components/slideBar'
  import gotop from '../components/public/goTop'
  import pageBottom from '../components/pageBottom'
  import goodsList from '../components/goodsList'
  /*import secondMenu from '../components/public/secondMenu'*/
  export default {
    name: "selected",
    components:{
      pageTop,
      slideBar,
      gotop,
      pageBottom,
      goodsList,
      /*  secondMenu*/
    },
    data(){
      return{
        text:'精选好品',
        active:1,
        act:1,
        ids:'',
        id:[],
        categoryList:[],
        infoList:[],
        goodsList:[
          {listText:'精致纯棉T恤舒适度优',},
          {listText:'精致纯棉T恤舒适度优,让人觉得很舒服',},
          {listText:'精致纯棉T恤舒适度优',},
          {listText:'精致纯棉T恤舒适度优,让人觉得很舒服',}],

      }
    },
    methods:{
      blank(){
        $("#containers").css(
          {"transform":"translateX(0vw)","transition":"transform .3s"});
      },
      getId:function(key){
        this.ids=key;
        console.log(this.ids)
       /* var that=this;
        this.$http({
          url:'/super/api/Shop/getGoodsByCid',
          method:'post',
          data:{
            category_id:this.id,
            page:this._globe.page,
            time:this._globe.time1,
            device_id:this._globe.device_id,
            version:this._globe.version,
            platform:this._globe.platform,
            /!*token:this._globe.token1,*!/
          }
        })
          .then(function (response) {
            const resData=response.data;
            if(resData.code==1){
              that.categoryList=resData.data.list;
              /!*that.id = that.categoryList[0].info[0].id();*!/
              console.log(that.categoryList)
            }
          })
          .catch(function (response) {
            console.log(response);
          })*/
      },
      menu(){
        $("#containers").css(
          {"transform":"translateX(72vw)","transition":"transform .3s"});
      }
    },
    created(){
      var that=this;
      this.$http({
        url:'/super/api/Shop/categoryList',
        method:'post',
        data:{
          time:this._globe.time1,
          device_id:this._globe.device_id,
          version:this._globe.version,
          platform:this._globe.platform,
          token:this._globe.token1,
        }
      })
        .then(function (response) {
          /*console.log(response);*/
          const resData=response.data;
          if(resData.code==1){
            that.categoryList=resData.data.list;
            that.info = resData.data.list.info;
            console.log(that.categoryList)
            /*that.infoList = resData.data.list.info;
            */
            /* console.log( that.categoryList);*/
            /*that.categoryList.forEach((item,index) => {
              if (item['info']){
                that.infoList = resData.data.list.info;
                console.log(infoList);
              }

            })*/

          }
        })
        .catch(function (response) {
          console.log(response);
        })

    },
  }
</script>

<style scoped>
  .mu-tabs{
    background: #fff !important;
    font-size: 13px;
    color: #666;
  }
  .mu-tab-active{
    color: #ff4c50;
  }
  .mu-tab-link-highlight{
    display: none !important;
  }
  .mu-ripple-wrapper{
    border: 1px solid #ff4c50;
    width: 60%;
    text-align: center;
  }
</style>
